<template>
  <div class="inConbox">
      <swiper :options="swiperOption" ref="mySwiper" v-for="(item,index) in bnnerIMg" :key="index" class="bnner_swipor">
        <swiper-slide>
          <router-link to="/bomnav">
            <img :src="item.IMg" alt="" class="swiper_link">
          </router-link>
        </swiper-slide>
        <swiper-slide>
          <router-link to="/bomnav">
            <img :src="item.IMg" alt="" class="swiper_link">
          </router-link>
        </swiper-slide>
        <swiper-slide>
          <router-link to="/bomnav">
            <img :src="item.IMg" alt="" class="swiper_link">
          </router-link>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <router-view></router-view>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'carrousel',
  components:{
    swiper,
    swiperSlide
  },
  data(){
    return {
      bnnerIMg:[
        {
          IMg:"./static/images/index/banner1.jpg",
          IMg:"./static/images/index/banner1.jpg",
          IMg:"./static/images/index/banner1.jpg",
        }
      ],
      swiperOption: {
        notNextTick: true,
        autoplay:true, //只有写生 true 才执行
        loop:true,   //循环
        initialSlide:1, //默认是第一张
        direction:'horizontal', //横向
        effect:"coverflow", //滑动方式
        grabCursor : true, //变成小手
        setWrapperSize :true, //支持flexbox
        pagination : '.swiper-pagination', //指示器元素
        paginationClickable :true, //类名
        speed:500, //松开贴近和
        type:'bullets', //指示器
      },
   }
 },
 computed: {
   swiper() {
     return this.$refs.mySwiper.swiper;
   }
 },
 
}
</script>
<style lang="scss" scoped>
.bnner_swipor{
  padding:.2rem .4rem;
  // height: 3.7rem;
  width: 100%;
  margin: 0;
  a{
    width: 100%;
    height: 100%;
    display: block;
    .swiper_link{
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>
